<template>
    <div class="edu-page-warp">
        <el-card shadow="never">
            <div style="margin-top:10px">
                <div class="edu-page-title" style="margin-bottom: 24px;">课程字段权限管理</div>
            </div>
            <div style="margin-bottom:20px;color:red">*配置教务员可维护课程管理的字段，勾选可编辑，未勾选只读</div>
            <div>
                <el-checkbox-group v-model="checkList">
                    <el-checkbox
                        :label="field.id"
                        v-for="field in fields"
                        :key="field.id"
                    >{{field.name}}</el-checkbox>
                </el-checkbox-group>
            </div>
            <div class="float-right" style="margin:20px 0">
                <el-button @click="reset">{{$t("message.reset")}}</el-button>
                <el-button type="primary" @click="save">{{$t("message.save")}}</el-button>
            </div>
        </el-card>
        <el-card shadow="never">
            <div style="margin-top:10px">
                <div class="edu-page-title" style="margin-bottom: 24px;float:left">课程字段时间管理</div>
                <el-button
                    style="float:right"
                    type="primary"
                    @click="addDialogOpen"
                >{{ $t('message.add') }}</el-button>
            </div>
            <EduTable
                :data="pageList"
                style="width: 100%"
                @page-change="pageChange"
                :total="pageTotal"
                :selection="false"
            >
                <el-table-column type="expand">
                    <template slot-scope="props">
                        <div class="expand-header">
                            <el-row :gutter="24">
                                <el-col :span="3" class="expand-label">
                                    <span>{{$t('permissions.startTime') + ':'}}</span>
                                </el-col>
                                <el-col :span="5">
                                    <span>{{ props.row.startTime}}</span>
                                </el-col>
                                <el-col :span="3" class="expand-label">
                                    <span>{{$t('permissions.stopTime') + ':'}}</span>
                                </el-col>
                                <el-col :span="5">
                                    <span>{{ props.row.endTime}}</span>
                                </el-col>
                            </el-row>
                            <el-row :gutter="24" style="margin-top:10px">
                                <el-col :span="3" class="expand-label">
                                    <span>{{$t('permissions.college') + ':'}}</span>
                                </el-col>
                                <el-col :span="21" class="faculty-list">
                                    <span
                                        v-for="(faculty,index) in props.row.facultys"
                                        :key="index"
                                    >{{index+1}}.{{faculty}}</span>
                                </el-col>
                            </el-row>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="collegeCodesI18n"
                    :label="$t('permissions.college')"
                    align="center"
                    width="240"
                    show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                    prop="startTime"
                    :label="$t('permissions.startTime')"
                    align="center"
                ></el-table-column>
                <el-table-column prop="endTime" :label="$t('permissions.stopTime')" align="center"></el-table-column>
                <el-table-column :label="$t('permissions.operation')" width="200px" align="center">
                    <template slot-scope="scope">
                        <el-button
                            type="text"
                            @click="editDialogOpen(scope.row)"
                        >{{ $t('common.btn.edit') }}</el-button>
                        <el-button
                            type="text"
                            @click="deleteTimeSetting(scope.row)"
                        >{{ $t('common.btn.delete') }}</el-button>
                    </template>
                </el-table-column>
            </EduTable>
        </el-card>
        <edu-dialog :title="tip" ref="timeSettingDialog" width="926px" @confirm="confirm">
            <el-form
                :model="postForm"
                label-position="right"
                label-width="100px"
                ref="postForm"
                :rules="rules"
                class="edu-search-form"
            >
                <el-row :gutter="24">
                    <el-col :span="12">
                        <el-form-item :label="$t('permissions.startTime') + ':'" prop="startTime">
                            <el-date-picker
                                v-model="postForm.startTime"
                                type="datetime"
                                align="right"
                                format="yyyy/MM/dd HH:mm"
                                value-format="timestamp"
                                :placeholder="$t('permissions.selectStartTime')"
                                style="width: 100%"
                            ></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item :label="$t('permissions.stopTime') + ':'" prop="endTime">
                            <el-date-picker
                                v-model="postForm.endTime"
                                type="datetime"
                                align="right"
                                format="yyyy/MM/dd HH:mm"
                                value-format="timestamp"
                                :placeholder="$t('permissions.selectStartTime')"
                                style="width: 100%"
                            ></el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24" style="margin-top:14px">
                        <el-form-item>
                            <el-transfer
                                ref="transfer"
                                v-model="postForm.collegeCodes"
                                filterable
                                :titles="[$t('permissions.allColleges'), $t('permissions.selectedColleges')]"
                                :filter-placeholder="$t('permissions.pleaseInputKey')"
                                :data="options.colleges"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </edu-dialog>
    </div>
</template>
<script>
import {
    getCoursePermission,
    updateCoursePermission,
    addCourseTimeSetting,
    updateCourseTimeSetting,
    deleteCourseTimeSetting,
    getDetailCourseTimeSetting,
    queryCourseTimeSetting
} from 'common/src/api/resource/course'
import { queryDic } from 'common/src/api/dictionary'
export default {
    name: 'coursePermission',
    data() {
        return {
            checkList: [],
            fields: null,
            pageList: null,
            pageTotal: null,
            options: {
                colleges: null
            },
            queryParams: {
                pageNum_: 1,
                pageSize_: 20,
                condition: {
                    collegeCodes: null,
                    page: true
                }
            },
            tip: null,
            postForm: {
                collegeCodes: [],
                startTime: null,
                endTime: null,
                id: null,
                manageDeptId: null
            },
            rules: {
                startTime: [
                    {
                        required: true,
                        message: '开始时间不能为空',
                        trigger: 'blur'
                    }
                ],
                endTime: [
                    {
                        required: true,
                        message: '结束时间不能为空',
                        trigger: 'blur'
                    }
                ]
            }
        }
    },
    mounted: function() {
        getCoursePermission().then(res => {
            if (res.code == 200) {
                this.checkList = res.data
                    .filter(column => !column.readOnly)
                    .map(column => column.id)
                this.fields = res.data
            }
        })
        this.getOptions()
        this.queryByCondition()
    },
    methods: {
        save() {
            console.log(this.checkList)
            this.fields.forEach(column => {
                if (this.checkList.includes(column.id)) {
                    column.readOnly = 0
                } else {
                    column.readOnly = 1
                }
            })
            updateCoursePermission(
                this.fields.map(column => {
                    return { id: column.id, readOnly: column.readOnly }
                })
            ).then(res => {
                if (res.code == 200) {
                    this.$message({
                        type: 'success',
                        message: this.$t('message.saveSuccess')
                    })
                }
            })
        },
        reset() {
            this.checkList = this.fields.filter(column => !column.readOnly).map(column => column.id)
        },
        getOptions() {
            let data = {
                lang: this.$store.getters.language || 'cn',
                type: 'allChild',
                keys: ['X_YX']
            }
            queryDic(data)
                .then(res => {
                    if (res.code == 200) {
                        let map = {
                            colleges: 'X_YX'
                        }
                        this.$utils.fillSelect(map, res.data, this.options)
                    }
                })
                .catch(error => {
                    console.log(error)
                })
        },
        queryByCondition() {
            queryCourseTimeSetting(this.queryParams).then(res => {
                if (res.code == 200) {
                    res.data.list.forEach(row => {
                        row.facultys = row.collegeCodesI18n ? row.collegeCodesI18n.split(',') : []
                    })
                    this.pageList = res.data.list
                    this.pageTotal = res.data.total_
                }
            })
        },
        pageChange(val) {
            this.queryParams.pageNum_ = val.pageNum
            this.queryParams.pageSize_ = val.pageSize
            this.queryByCondition()
        },
        addDialogOpen() {
            this.openAndClearWarning()
            this.tip = this.$t('message.add')
        },
        editDialogOpen(row) {
            this.openAndClearWarning()
            this.tip = this.$t('message.edit')
            getDetailCourseTimeSetting(row.id).then(res => {
                if (res.code == 200) {
                    this.postForm.id = row.id
                    this.postForm.manageDeptId = row.manageDeptId
                    this.postForm.startTime = new Date(res.data.startTime).valueOf()
                    this.postForm.endTime = new Date(res.data.endTime).valueOf()
                    this.postForm.collegeCodes = res.data.collegeCodes.split(',')
                }
            })
        },
        openAndClearWarning() {
            this.$refs.timeSettingDialog.open()
            this.postForm.startTime = null
            this.postForm.endTime = null
            this.postForm.id = null
            this.postForm.manageDeptId = null
            this.postForm.collegeCodes = []
            if (this.$refs.postForm) this.$refs.postForm.clearValidate()
            if (this.$refs.transfer) {
                this.$refs.transfer.clearQuery('left')
                this.$refs.transfer.clearQuery('right')
            }
        },
        deleteTimeSetting(row) {
            this.$delConfirm(this.$t('message.areYouSureDelete'), this.$t('message.prompt')).then(
                () => {
                    deleteCourseTimeSetting([row.id]).then(res => {
                        if (res.code == 200) {
                            this.$message({
                                type: 'success',
                                message: this.$t('message.deleteSuccess')
                            })
                            this.queryByCondition()
                        }
                    })
                }
            )
        },
        confirm() {
            this.$refs.postForm.validate(valid => {
                if (valid) {
                    if (this.postForm.startTime > this.postForm.endTime) {
                        this.$message({
                            type: 'warning',
                            message: '开始时间不得超过结束时间'
                        })
                        return
                    }
                    if (this.postForm.collegeCodes.length == 0) {
                        this.$message({
                            type: 'warning',
                            message: '必须至少选择一个学院'
                        })
                        return
                    }
                    let params = _.cloneDeep(this.postForm)
                    params.collegeCodes = this.postForm.collegeCodes.join(',')
                    let msg = null
                    let fn = null
                    if (this.postForm.id) {
                        msg = this.$t('message.saveSuccess')
                        fn = updateCourseTimeSetting
                    } else {
                        msg = this.$t('message.addSuccess')
                        fn = addCourseTimeSetting
                    }
                    fn(params).then(res => {
                        if (res.code == 200) {
                            this.$message({
                                type: 'success',
                                message: msg
                            })
                            this.$refs.timeSettingDialog.close()
                            this.queryByCondition()
                        }
                    })
                }
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.el-checkbox-group {
    & ::v-deep .el-checkbox {
        width: 25%;
        margin-left: 0;
        height: 24px;
    }
}
.expand-label {
    text-align: right;
    padding: 0;
    color: #99a9bf;
}
.faculty-list span {
    margin-right: 20px;
    line-height: 20px;
}
</style>